<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>Ace Admin</title>
    <script>
        var config = {
//            baseUrl: ""
            baseUrl: "/knockoutace"
        };

        // 返回ie版本，如果不是ie，返回999
        function getIEVersion() {
            var UA = navigator.userAgent;
            var isIE = UA.indexOf('MSIE') > -1;
            return isIE ? /\d+/.exec(UA.split(';')[1]) : 999;
        }

        // 动态创建css节点，并添加到positionNode里
        function createCssNode(data, positionNode) {
            var node = document.createElement('link');
            node.setAttribute("rel", "stylesheet");
            node.setAttribute("type", "text/css");
            node.setAttribute("href", config.baseUrl + data["href"]);
            if(data["class"]) {
                node.setAttribute("class", data["class"]);
            }
            if(data["id"]) {
                node.setAttribute("id", data["id"]);
            }
            positionNode.appendChild(node);
        }

        // 动态创建js节点，并添加到positionNode里
        function createJsNode(src, positionNode, fun) {
            var node = document.createElement('script');
            node.setAttribute("type", "text/javascript");
            node.setAttribute("src", config.baseUrl + src);
            node.onload = node.onreadystatechange = function() {
                if(!node.readyState || 'loaded' === node.readyState || 'complete' === node.readyState) {
                    fun && fun();
                }
            };
            positionNode.appendChild(node);
        }

        // 按顺序加载js文件
        function loadJsOneByOne(data, index, callback) {
            var head = document.getElementsByTagName("head")[0];

            if(index == data.length) {
                callback && callback();
            } else {
                createJsNode(data[index], head, function(){
                    loadJsOneByOne(data, ++index, callback);
                });
            }
        }

        // 加载css文件
        (function loadCssFiles() {
            var cssFiles = {
                "all": [
                    {"href": "/dist/bootstrap/css/bootstrap.css"},
                    {"href": "/dist/font-awesome/css/font-awesome.css"},
                    {"href": "/dist/prettify/prettify.min.css"},
                    {"href": "/lib/ace/fonts.googleapis.com.css"},
                    {"href": "/lib/ace/ace.min.css", "class": "ace-main-stylesheet", "id": "main-ace-style"},
                    {"href": "/lib/ace/ace-skins.min.css"},
                    {"href": "/lib/ace/ace-rtl.min.css"}
                ],
                "lte9": [
                    {"href": "/lib/ace/ie9/ace-part2.min.css", "class": "ace-main-stylesheet"},
                    {"href": "/lib/ace/ie9/ace-ie.min.css"}
                ]
            };

            var head = document.getElementsByTagName("head")[0];

            var allCssFiles = cssFiles["all"];
            if(allCssFiles) {
                for(var index = 0, length = allCssFiles.length; index < length; index++) {
                    createCssNode(allCssFiles[index], head);
                }
            }

            var lte9CssFiles = cssFiles["lte9"];
            if(lte9CssFiles && lte9CssFiles.length && getIEVersion() <= 9) {
                for(index = 0, length = lte9CssFiles.length; index < length; index++) {
                    createCssNode(allCssFiles[index], head);
                }
            }
        })();
        createJsNode("/lib/ace/ace-extra.min.js", document.getElementsByTagName("head")[0]);

        // 加载js文件
        (function loadJsFiles(){
            var jsFiles = {
                "all": [
                    "/dist/jquery/jquery-1.12.4.js",
                    "/dist/jquery/jquery-ext.js",
                    "/dist/bootstrap/js/bootstrap.js",
                    "/dist/knockout/knockout.debug.js",
                    "/dist/prettify/prettify.min.js",
                    "/lib/ace/ace-elements.min.js",
                    "/lib/ace/ace.min.js"
                ],
                "lte8": [
                    "/lib/ie8/html5shiv.min.js",
                    "/lib/ie8/respond.min.js"
                ]
            };

            var needLoadJsFiles = jsFiles["all"];
            var lte8JsFiles = jsFiles["lte8"];
            if(lte8JsFiles && lte8JsFiles.length && getIEVersion() <= 8) {
                needLoadJsFiles = lte8JsFiles.concat(needLoadJsFiles);
            }

            loadJsOneByOne(needLoadJsFiles, 0, function(){
                window.onload = function() {
                    createJsNode("/index.js", document.getElementsByTagName("head")[0]);
                }
            });
        })();
    </script>
</head>
<body class="no-skin">
    <div id="navbar" class="navbar navbar-default ace-save-state">
        <div class="navbar-container ace-save-state" id="navbar-container">
            <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
                <span class="sr-only">Toggle sidebar</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header pull-left">
                <a href="" class="navbar-brand">
                    <small>
                        <i class="fa fa-leaf"></i>
                        Ace Admin
                    </small>
                </a>
            </div>
            <div class="navbar-buttons navbar-header pull-right" role="navigation">
                <ul class="nav ace-nav">
                    <li class="green dropdown-modal">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="">
                            <i class="ace-icon fa fa-tasks"></i>
                            <span class="badge badge-success">2</span>
                        </a>
                        <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                            <li class="dropdown-header">
                                <i class="ace-icon fa fa-check"></i>
                                2 Tasks to complete
                            </li>
                            <li class="dropdown-content">
                                <ul class="dropdown-menu dropdown-navbar">
                                    <li>
                                        <a href="">
                                            <div class="clearfix">
                                                <span class="pull-left">Software Update</span>
                                                <span class="pull-right">65%</span>
                                            </div>
                                            <div class="progress progress-mini">
                                                <div class="progress-bar" style="width:65%;"></div>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="" class="clearfix">
                                            <img src="" alt="Photo" class="msg-photo" />
                                                <span class="msg-body">
                                                    <span class="msg-title">
                                                        <span class="blue">Fred:</span>
                                                        Vestibulum id penatibus et auctor ...
                                                    </span>
                                                    <span class="msg-time">
                                                        <i class="ace-icon fa fa-clock-o"></i>
                                                        <span>10:09 am</span>
                                                    </span>
                                                </span>
                                        </a>
                                    </li>
                                    <li class="dropdown-footer">
                                        <a href="">
                                            See tasks with details
                                            <i class="ace-icon fa fa-arrow-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!-- ko template: {name: 'nav-user-template'} -->
                    <!-- /ko -->
                </ul>
            </div><!-- /.navbar-buttons -->
        </div><!-- /.navbar-container -->
    </div>

    <div class="main-container ace-save-state" id="main-container">
        <script type="text/javascript">
            try{ace.settings.loadState('main-container');}catch(e){}
        </script>
        <div id="sidebar" class="sidebar responsive ace-save-state">
            <script type="text/javascript">
                try{ace.settings.loadState('sidebar');}catch(e){}
            </script>
            <div data-bind="template: {name: 'sidebar-shortcuts-template'}"></div>
            <ul class="nav nav-list" data-bind="template: {name: 'sidebar-list-template', foreach: data.sidebarList}"></ul>
            <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
                <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
            </div>
        </div><!-- /#sidebar -->
        <div class="main-content">
            <div class="main-content-inner">
                <!-- ko template: {name: 'breadcrumb-template'} -->
                <!-- /ko -->
                <div class="page-content"></div>
            </div>
        </div><!-- /.main-content -->
        <div class="footer">
            <div class="footer-inner">
                <div class="footer-content">
                    <span class="bigger-120">
                        <span class="blue bolder">Ace</span>
                        Application &copy; 2016
                    </span>
                    &nbsp; &nbsp;
                    <span class="action-buttons">
                        <a href="">
                            <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
                        </a>
                        <a href="">
                            <i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
                        </a>
                        <a href="">
                            <i class="ace-icon fa fa-rss-square orange bigger-150"></i>
                        </a>
                    </span>
                </div>
            </div>
        </div>
        <a class="btn-scroll-up btn btn-sm btn-inverse" id="btn-scroll-up" href="">
            <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
        </a>
    </div> <!-- /.main-container -->

    <div id="templateContainer"></div>
</body>
</html>